<template>
	<div class="clearfloat padding-across-10" style="height:100%;margin-bottom: 100px" v-loading="loading" element-loading-text="拼命加载中">
		<div class="navList">
			<div>
				<headerOpreate :opreate-datas="opreateDatas" v-on:executeAction="executeAction"></headerOpreate>
			</div>
		</div>
		<el-row :gutter="5">
			<el-col :span="24">
				<!-- 设备详情 -->
				<div class="bg-purple">
					<div class="panel-title" style="width: 100%;margin: 10px 0 2px">
						<span>设备信息</span>
					</div>
					<el-table border style="width: 100%" :data="statusDatasArr">
						<el-table-column :show-overflow-tooltip="true" label="设备名" align="center">
							<template slot-scope="scope">
								<span>{{scope.row.name}}<i class="el-icon-edit" style="margin-left: 5px;cursor: pointer;color: #50bfff" @click="changeDeviceName(scope.row)"></i></span>
							</template>
						</el-table-column>
						<el-table-column :show-overflow-tooltip="true" label="设备码" align="center" prop="sn"></el-table-column>
						<el-table-column :show-overflow-tooltip="true" label="状态" align="center">
							<template slot-scope="scope">
								<el-tag v-if="scope.row.online" type="success">
									<li class="el-icon-circle-check el-icon--left"></li>在线
								</el-tag>
								<el-tag v-else type="gray">
									<li class="el-icon-circle-close el-icon--left"></li>离线
								</el-tag>
							</template>
						</el-table-column>
					</el-table>
					<div class="panel-title" style="width: 100%;margin: 10px 0 2px">
						<span>设备详情</span>
					</div>
					<el-table border @selection-change="handleSelectionChange" :data="tableData">
						<el-table-column :show-overflow-tooltip="true" type="selection"></el-table-column>
						<el-table-column :show-overflow-tooltip="true" label="线路名称" align="center" prop="title"></el-table-column>
						<el-table-column :show-overflow-tooltip="true" label="线路状态" align="center">
							<template slot-scope="scope">
								<el-tag v-if="scope.row.online" type="success">
									<li class="el-icon-circle-check el-icon--left"></li>在线</el-tag>
								<el-tag v-if="!scope.row.online" type="gray">
									<li class="el-icon-circle-close el-icon--left"></li>离线
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column :show-overflow-tooltip="true" label="开关状态" align="center">
							<template slot-scope="scope">
								<el-tag v-if="scope.row.oc" type="success">
									<li class="el-icon-circle-check el-icon--left"></li>开启</el-tag>
								<el-tag v-if="!scope.row.oc" type="danger">
									<li class="el-icon-circle-close el-icon--left"></li>关闭
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column :show-overflow-tooltip="true" label="电流（mA）" align="center" prop="aA"></el-table-column>
						<el-table-column :show-overflow-tooltip="true" label="电压（V）" align="center" prop="aV"></el-table-column>
						<el-table-column :show-overflow-tooltip="true" label="功率（W）" align="center" prop="aW"></el-table-column>
						<el-table-column :show-overflow-tooltip="true" label="温度（℃）" align="center" prop="aT"></el-table-column>
						<el-table-column :show-overflow-tooltip="true" label="用电量（度）" align="center" prop="power"></el-table-column>
						<el-table-column :show-overflow-tooltip="true" label="手动关闭" align="center">
							<template slot-scope="scope">
								<span v-if="scope.row.enableNetCtrl">否</span>
								<span v-else><span style="color: red;">是</span>(手动开启可恢复远程控制)</span>
							</template>
						</el-table-column>
						<el-table-column :show-overflow-tooltip="true" label="状态上报时间" align="center" prop="updateTime"></el-table-column>
					</el-table>
				</div>
			</el-col>
		</el-row>
		<el-row :gutter="5" style="margin: 10px 0;">
			<el-col :span="24">
				<!-- 设备详情 -->
				<div class="bg-purple">
					<div class="panel-title">
						<span>告警信息</span>
					</div>
				</div>
				<el-row style="margin: 10px 0;">
					<el-col :span="12">
						<div style="text-align: left">
							<span style="font-size: 13px;font-weight: bold">{{$t('message.start')}}</span>
							<el-date-picker :editable="false" v-model="startTime" :clearable="false" size="small" type="date" placeholder="选择起始日期" @change="changeStartTime"></el-date-picker>
							<span style="font-size: 13px;font-weight: bold">{{$t('message.end')}}</span>
							<el-date-picker :editable="false" v-model="endTime" :clearable="false" size="small" type="date" placeholder="选择结束日期" @change="changeEndTime"></el-date-picker>
						</div>
					</el-col>
					<el-col :span="12">
						<div class="block" style="text-align:right;">
							<el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="currentPage" :page-size="pageSize" :page-sizes="[10,20,30,40,50]" layout="total,sizes, prev, pager, next, jumper" :total="totalSize">
							</el-pagination>
						</div>
					</el-col>
				</el-row>
				<el-row :gutter="5">
					<el-col :span="24">
						<div>
							<el-table border style="width: 100%;margin-top: 1px" :data="warnData">
								<el-table-column :show-overflow-tooltip="true" label="线路名称" align="center" prop="node">
								</el-table-column>
								<el-table-column :show-overflow-tooltip="true" label="告警类型" align="center" prop="type"></el-table-column>
								<el-table-column :show-overflow-tooltip="true" label="告警时间" align="center" prop="time"></el-table-column>
								<el-table-column :show-overflow-tooltip="true" label="告警信息内容" align="center" prop="info"></el-table-column>
							</el-table>
							<div class="block" style="text-align:right;margin:10px 0;">
								<el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="currentPage" :page-size="pageSize" :page-sizes="[10,20,30,40,50]" layout="total,sizes, prev, pager, next, jumper" :total="totalSize">
								</el-pagination>
							</div>
						</div>
					</el-col>
				</el-row>
			</el-col>
		</el-row>
		<!-- 修改名称 -->
		<el-dialog title="修改设备名称" v-model="renameDeviceDialog" :class="[dialog-tiny-width]" v-loading="changeNameObj.waitting">
			<el-form id="form" ref="changeNameForm" :model="changeNameForm" :rules="changeNameRules" label-width="100px">
				<el-form-item label="设备名称" prop="name">
					<el-input v-model="changeNameForm.name" required style="max-width:480px"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="renameDeviceDialog = false">取 消</el-button>
				<el-button type="primary" @click="confirmChangeName('changeNameForm')">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import headerOpreate from '../../../../components/headerOpreate'
	import { GloabFun, HttpServer } from '../../../../assets/js/common.js'
	var date = new Date();
	var that = null;
	var flag = true;

	export default {
		components: {
			headerOpreate
		},
		data() {
			Date.prototype.format = function(format) {
				var date = {
					"M+": this.getMonth() + 1,
					"d+": this.getDate()
				};
				if(/(y+)/i.test(format)) {
					format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
				}
				for(var k in date) {
					if(new RegExp("(" + k + ")").test(format)) {
						format = format.replace(RegExp.$1, RegExp.$1.length == 1 ?
							date[k] : ("00" + date[k]).substr(("" + date[k]).length));
					}
				}
				return format;
			}
			return {
				isReload: false,
				opreateDatas: [{
						show: true,
						size: "small",
						type: 'primary',
						icon: 'el-icon-eleg-icon_refresh el-icon--left',
						name: this.$t("message.refresh"),
						action: 'reloadDatas'
					},
					{
						show: true,
						type: "success",
						size: "small",
						icon: "",
						name: "批量开启",
						action: "allOpen"
					},
					{
						show: true,
						type: "danger",
						size: "small",
						icon: "",
						name: "批量关闭",
						action: "allClose"
					}
				],
				tableData: [],
				EBoxDetailIntervalid: null,
				currentPage: 1,
				pageSize: 10,
				totalSize: 0,
				startTime: new Date((date.getTime() - 3600 * 1000 * 24 * 30)).format('yyyy-MM-dd') + ' 00:00:00',
				endTime: date.format('yyyy-MM-dd') + ' 23:59:59',
				warnData: [],
				selectedData: [],
				selectedItem: [],
				changeNameForm: {
					name: '',
				},
				changeNameObj: {
					waitting: false
				},
				renameDeviceDialog: false
			}
		},
		props: {
			templateObj: {
				type: Object,
				default: {}
			}
		},
		methods: {
			//确定修改名称
			confirmChangeName(formName) {
				this.$refs[formName].validate((valid) => {
					if(valid) {
						this.$confirm('此操作将修改设备名称，是否继续?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							this.changeNameObj.waitting = true;
							this.renameDeviceDialog = false;
							HttpServer.httpPost.call(this, '/Api/Device/UpdateName', {
								sn: this.templateObj.sn,
								name: this.changeNameForm.name,
								UserId: parseInt(GloabFun.getKeyId())
							}, function(response) {}, function(response) {
								this.changeNameObj.waitting = false;
								if(response.data.code === 0) {
									this.$notify({
										title: '成功',
										message: this.$t('message.operationSuccess'),
										type: 'success',
										duration: 2500
									});
									this.statusDatasArr[0].name = this.changeNameForm.name;
								}else{
									this.$notify({
										title: '失败',
										message: response.data.msg,
										duration: 2500
									});
								}

							})
						}).catch(() => {
							this.$notify.info({
								title: '消息',
								message: this.$t('message.operationCanceled'),
								duration: 2500
							})
						});
					} else {
						return false;
					}
				})
			},
			//修改设备名称
			changeDeviceName(row) {
				this.renameDeviceDialog = true;
				this.changeNameForm.name = row.Name;
			},
			handleSelectionChange(val) {
				this.getALLAddr(val);
				this.selectedItem = val;
			},
			changeStartTime() {
				this.startTime = new Date(this.startTime).format('yyyy-MM-dd') + ' 00:00:00';
				this.getWarnInfo();
			},
			changeEndTime() {
				this.endTime = new Date(this.endTime).format('yyyy-MM-dd') + ' 23:59:59';
				this.getWarnInfo();
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.getWarnInfo();
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getWarnInfo();
			},
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},
			getALLAddr(array) {
				let addrs = ""
				array.forEach(item => {
					addrs += item.addr + ","
				});
				this.selectedData = addrs;
			},
			allOpen() {
				if(!this.templateObj.online) {
					this.$notify({
						title: this.$t('message.warning'),
						message: '设备不在线',
						type: 'warning',
						duration: 2000
					});
					return
				} else if(this.selectedItem.length === 0) {
					this.$notify({
						title: this.$t('message.warning'),
						message: '请选择控制线路',
						type: 'warning',
						duration: 2000
					});
					return
				}
				var params = {
					mac: this.templateObj.sn,
					value1: 'open',
					value2: this.selectedData
				}
				HttpServer.httpPost.call(this, '/Api/AirSwitch/ControlEBox', params, res => {}, res => {
					if(res.data.code !== 0) {
						this.$notify({
							title: this.$t('message.warning'),
							message: res.data.message,
							type: 'warning',
							duration: 2000
						});
					} else {
						this.$notify({
							title: this.$t('message.success'),
							message: res.data.message,
							type: 'success',
							duration: 2000
						});
						this.tableData.forEach(item => {
							this.selectedItem.forEach(s => {
								if(item.addr === s.addr) {
									item.oc = true;
								}
							})
						});
					}
				});
			},
			allClose() {
				if(!this.templateObj.online) {
					this.$notify({
						title: this.$t('message.warning'),
						message: '设备不在线',
						type: 'warning',
						duration: 2000
					});
					return
				} else if(this.selectedItem.length === 0) {
					this.$notify({
						title: this.$t('message.warning'),
						message: '请选择控制线路',
						type: 'warning',
						duration: 2000
					});
					return
				}
				var params = {
					mac: this.templateObj.sn,
					value1: 'close',
					value2: this.selectedData
				}
				HttpServer.httpPost.call(this, '/Api/AirSwitch/ControlEBox', params, res => {}, res => {
					if(res.data.code !== 0) {
						this.$notify({
							title: this.$t('message.warning'),
							message: res.data.message,
							type: 'warning',
							duration: 2000
						});
					} else {
						this.$notify({
							title: this.$t('message.success'),
							message: res.data.message,
							type: 'success',
							duration: 2000
						});
						this.tableData.forEach(item => {
							this.selectedItem.forEach(s => {
								if(item.addr === s.addr) {
									item.oc = false;
								}
							})
						});
					}
				});
			},
			//刷新
			reloadDatas() {
				this.isReload = true;
				this.getDatas();
			},
			getWarnInfo() {
				let params = {
					mac: this.templateObj.sn,
					currentPage: this.currentPage,
					pageSize: this.pageSize,
					start: this.startTime,
					end: this.endTime
				}
				HttpServer.httpPost.call(this, '/Api/AirSwitch/GetWarnInfo', params, (err) => {}, (res) => {
					console.log(res)
					if(res.data.code === 0) {
						this.warnData = res.data.data.datas;
						console.log(res.data.data.total);
						this.totalSize = res.data.data.total;
					} else {
						this.$message.error(response.data.message);
					}
				});
			},
			getDatas() {
				// this.loading = true;
				HttpServer.httpGet.call(this, '/Api/AirSwitch/EBoxInfo?mac=' + this.templateObj.sn, function(response) {}, function(response) {
					if(response.data.code === 0) {
						this.tableData = response.data.data;
					} else {
						this.$message.error(response.data.message);
					}
					this.isReload = false;
				});
			},
		},
		computed: {
			statusDatasArr() {
				let arr = [];
				arr.push(this.templateObj);
				return arr;
			}
		},
		created() {
			this.IsOnLine = this.templateObj.online;
			this.getDatas();
			this.getWarnInfo();
			//			if(this.templateObj.online2) {
			//				this.EBoxDetailIntervalid = setInterval(() => {
			//					this.getDatas();
			//				}, 5000)
			//			}
		},
		beforeDestroy() {
			clearInterval(this.EBoxDetailIntervalid);
		}
	}
</script>

<style scoped>
	@import '../../../../assets/css/font-awesome-4.7.0/css/font-awesome.css';
</style>
<style scoped lang="less">
	@import '../../../../assets/css/media-screen.less';
</style>

<style scoped lang="less">
	* {
		box-sizing: border-box;
	}
	
	.el-date-editor.el-input {
		width: 115px;
	}
	
	.navList {
		width: 100%;
		padding: 3px 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.el-row {
		margin-bottom: 5px;
		.bg-purple {
			width: 100%;
			// background: #EAF4FF;
			.detail-title {
				text-align: center;
				display: flex;
				flex-direction: column;
			}
			.middle-section {
				width: 100%;
				display: flex;
				.middle-bg {}
			}
			.icon-default {
				color: #999999;
			}
			.panel-title {
				width: 100%;
				height: 25px;
				color: white;
				background-color: #20A0FF;
				border-radius: 3px;
				line-height: 25px;
				padding-left: 10px;
				.title-img {
					width: 30%;
					float: right;
					height: 100%;
					width: 100px
				}
			}
		}
	}
	
	.box-card {
		max-width: 360px;
		margin-bottom: 10px;
		.header-flex {
			display: flex;
			justify-content: space-between;
			.card-header-left {
				width: 30%;
				text-align: center;
				img {
					max-width: 100%;
				}
			}
			.card-header-right {
				width: 70%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				.el-tag {
					width: 56px;
				}
			}
		}
	}
</style>